<template>
  <el-dialog :visible.sync="visible" width="80%" @close="close" :append-to-body="true">
    <div class="largeScreen fcbc fv">
      <div class="titleBox flt pt20 pb20 w1">
        <div class="flex-1 tableTitle f20 pl20">风机数据列表</div>
      </div>
      <div class="tableBox p30 flex-1 w1 fcbc fv" style="height: calc(100% - 60px);">
        <el-table v-loading="loading" :data="turbineList" style="width: 100%;height: 100%;" class="flex-1 custom-table"
          :header-cell-style="{ background: '#153864cc', color: '#36f5f7' }" :cell-style="{ color: '#ffffff' }">
          <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
          <el-table-column prop="turbineCode" label="风机名称" align="center"></el-table-column>
          <el-table-column prop="value" label="有效功率" align="center"></el-table-column>
          <el-table-column prop="collectionAt" label="时间" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleDetail(scope.row)" class="detail-btn"
                style="text-decoration: underline;">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "tableList",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  data() {
    return {
      turbineList: [],
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    close() {
      this.$emit("update:dialogVisible", false);
    },

    /** 查询参数列表 */
    getList() {
      this.loading = true;
      request({
        url: '/fjfd/turbine/listTurbine',
        method: 'get',
        params: {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        }
      }).then(response => {
        this.total = response.total || 0;
        this.turbineList = response.rows || [];
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },

    handlePageChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },

    handleDetail(row) {
      this.$router.push({
        path: "/fengJiDetail",
        query: {
          windTurbineId: row.id,       // 第一个参数
          windTurbinename: row.turbineCode    // 第二个参数
        }
        // path: "/fengJiDetail?windTurbineId="+row.id&anotherParam=someValue
      });
    }
  },
};
</script>

<style scoped lang="scss">
.largeScreen {
  background-image: url("~@/assets/images/windPower/tableBg.png");
  background-size: 100% 100%;
  width: 100%;
  height: 595px;
  padding-bottom: 10px;
  position: relative;

  .titleBox {
    height: 40px;
    width: 100%;
  }

  .tableTitle {
    color: #ffffff;
  }
}

::v-deep .el-dialog__wrapper {
  z-index: 9999 !important;
}

::v-deep .el-dialog {
  background-color: transparent !important;
}

// 表格
::v-deep .el-table__body-wrapper {
  font-size: 14px !important;
}
::v-deep .el-table__body-wrapper table {
  display: block!important;
  height: 417px !important;
  overflow: auto;
}
::v-deep .el-table__body-wrapper tbody {
  height: 100% !important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
::v-deep .el-table::before {
  height: 0px;
}
::v-deep .el-table th {
  background-color: #153864cc !important;
  border-bottom: none !important;
  color: #36f5f7;
}
::v-deep .el-table tr {
  background-color: transparent !important;
  color: #ffffff;
  height: 41px;
}
::v-deep .el-table td {
  padding: 5px 0 !important;
}
::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: normal;
}
::v-deep .el-table__empty-block{
  margin-top: -200px;
}

// 分页
::v-deep .pagination-container {
  background: transparent;
}

::v-deep .el-pagination.is-background .btn-prev,
::v-deep .el-pagination.is-background .btn-next,
::v-deep .el-pagination.is-background .el-pager li {
  background-color: transparent;
  color: #0aa7ff;
  border: 1px solid #0aa7ff;
}
</style>
